<template>
  <div>
    <div class="hot-list-header">
    <slot name="header"></slot>
  </div>
  <ul>
    <li v-for="(item, index) in date" :key="index" class="hot-list-item">
      <slot name="card" :item="item" :index="index"></slot>
    </li>
  </ul>
  </div>
</template>

<script>
export default {
  props:['date'],
  data() {
    return {
    };
  }
};
</script>

<style scoped>

  .hot-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-image: linear-gradient(to right, #3376f7, #71d0fa);
    color: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .hot-list-item {
    border-bottom: 1px solid #ddd;
    padding: 15px;
    background-color: white;
  }
  .hot-list-item:last-child {
    border-bottom: none;
  }
  .hot-list-item span {
    float: right;
    color: orange;
  }
</style>